<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>消息管理</title>

  {include file='common/_require'/}
  <style>
    .msg-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .msg-body {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .msg-body a {
      color: #66CCFF;
      margin-right: 5px;
    }

    .wait-status {
      margin-top: 8px;
      margin-left: 5px;
    }
  </style>
</head>

<body>

  {include file='common/_header'/}

  <div class="layui-container fly-marginTop fly-user-main">
    {include file='common/_user'/}
    <script>$('.user-nav-item-message').addClass('layui-this')</script>
    <div class="site-tree-mobile layui-hide">
      <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
      <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>
      <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_msg" style="margin-top: 15px;">
        <button class="layui-btn layui-btn-danger" id="option-delete-all">清空全部消息</button>
        <button class="layui-btn layui-btn-danger" id="option-status-all">全部标记已读</button>
        <div id="LAY_minemsg" style="margin-top: 10px;">
          {empty name='$list'}

          <div class="fly-none">您暂时没有最新消息</div>
          {else /}

          <ul class="mine-msg">
            {volist name='list' id='vo'}
            <li data-id="{$vo.id}" class="item">
              <blockquote class="layui-elem-quote">
                <div class="msg-body">
                  {$vo.content_html|raw}
                  <span class="layui-badge-dot wait-status {eq name='$vo.status' value='1'}u-hidden{/eq}"></span>
                </div>
              </blockquote>
              <div class="msg-options">
                <div>{$vo.create_time_format}</div>
                <div>
                  <div class="layui-btn layui-btn-small layui-btn-danger layui-btn-sm option-status">标记已读</div>
                  <div class="layui-btn layui-btn-small layui-btn-danger layui-btn-sm option-delete">删除</div>
                </div>
              </div>
            </li>

            {/volist}
          </ul>
          {/empty}
          <div>
            {$list->render()|raw}
          </div>
        </div>
      </div>
    </div>

  </div>

  {include file='common/_footer'/}

  <script>

    $('.option-status').click(function () {
      var item = this;
      var parent = $(item).closest('.item')
      $.post('{:url("Record/update")}', {
        id: $(parent).data('id'),
        status: 1
      }, function (result) {
        if (result.code == 0) {
          layer.msg("标记成功")
          $(parent).find('.wait-status').hide()
        }
      })
    })
    $('.option-delete').click(function () {
      var item = this;
      var parent = $(item).closest('.item')

      layer.confirm('确定要删除吗?', function () {
        $.post('{:url("Record/delete")}', {
          id: $(parent).data('id'),
        }, function (result) {
          if (result.code == 0) {
            layer.msg("删除成功")
            $(parent).remove();
          }
        })
      })
    })

    $('#option-delete-all').click(function () {
      layer.confirm('确定要全部删除吗?',function(){
        $.post('{:url("Record/deleteAll")}', {
          id: $(parent).data('id'),
        }, function (result) {
          if (result.code == 0) {
            layer.msg("删除成功")
            setTimeout(() => {
              location.reload();
            }, 1200);
          }
        })
      })
    })
    $('#option-status-all').click(function () {
      layer.confirm('确定要全部标记已读吗?',function(){
        $.post('{:url("Record/optionStatusAll")}', {
          id: $(parent).data('id'),
        }, function (result) {
          if (result.code == 0) {
            layer.msg("标记成功")
            setTimeout(() => {
              location.reload();
            }, 1200);
          }
        })
      })
    })

  </script>
</body>

</html>